<template>
	<view>
		<view style="padding: 20rpx;">
			<u-swiper :list="list" height="200" circular indicator></u-swiper>
			<u-row class="gk-grid">
				<u-col span="3" v-for="(item,index) in baseList" :key="index">
					<view class="gk-grid-item">
						<img :src="item.ico" alt="" srcset="" />
						<view>
							{{item.title}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="gk-line"></view>
		<view style="padding: 20rpx;">
			<view class="gk-nav">
				<view>
					<view>新闻动态</view>
				</view>
				<view class="more">
					<view style="margin-right: 10rpx;font-size: 24rpx;">更多</view>
					<u-icon size="13" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view style="padding: 20rpx;" class="news-list">
			<!-- 	<u-row class="news-item">
				<u-col span="4">
					<img src="../../static/images/pic_01.png" alt="" />
				</u-col>
				<u-col span="8">
					<view class="news-content">
						<view class="news-title">我院研究生荣获第八届国联证券Find“凡能仙”全国高校财商大赛全国第一！</view>
						<view style="display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;">
							<view class="news-days">2024-12-09</view>
							<view class="news-viewnum">阅读:2348</view>
						</view>
					</view>
				</u-col>
			</u-row> -->
			<view class="news-item" v-for="(item,index) in newlist" :key="index">
				<img :src="item.url" alt="" />
				<view class="news-content">
					<view class="news-title">{{item.title}}</view>
					<view style="display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;">
						<view class="news-days">{{item.time}}</view>
						<view class="news-viewnum">阅读:{{item.viewnum}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'../../static/images/20241205.jpg',
					'../../static/images/202411301.jpg',
					'../../static/images/202411302.jpg',
					'../../static/images/2024112702.png',
				],
				baseList: [{
						ico: '../../static/images/ico_01.png',
						title: '找朋友'
					},
					{
						ico: '../../static/images/ico_02.png',
						title: '助力母校'
					},
					{
						ico: '../../static/images/ico_03.png',
						title: '点亮全球'
					},
					{
						ico: '../../static/images/ico_04.png',
						title: '理工智能'
					},
				],
				newlist: [
					{
					url: '../../static/images/pic_01.png',
					title: "我院研究生荣获第八届国联证券Find“凡能仙”全国高校财商大赛全国第一！",
					time: "2024-12-09",
					viewnum: 2453
					},
					{
					url: '../../static/images/pic_02.jpg',
					title: "党委书记王丽萍调研世界经济系",
					time: "2024-12-09",
					viewnum: 2453
					},
					{
					url: '../../static/images/pic_03.jpg',
					title: "经管院专硕学生获第二届研究生企业管理创新大赛总决赛一等奖",
					time: "2024-12-09",
					viewnum: 2453
					},
					{
					url: '../../static/images/pic_04.jpg',
					title: "应急管理部国家减灾中心领导专家莅临我院座谈交流",
					time: "2024-12-09",
					viewnum: 2453
					},
					{
					url: '../../static/images/pic_05.jpg',
					title: "【珞珈经管创新论坛】第120期：明尼苏达大学卡尔森商学院朱毅教授来院讲学",
					time: "2024-12-09",
					viewnum: 2453
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			handleClick(index) {
				console.log(index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gk-grid {
		.gk-grid-item {
			padding: 20rpx;
			text-align: center;
			font-size: 26rpx;

			img {
				width: 80rpx;
				height: 80rpx;
				margin-top: 10rpx;
			}
		}
	}

	.gk-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f2f2f2;
		padding-bottom: 30rpx;
		padding-top: 10rpx;

		.more {
			color: #999;
			display: flex;
			align-items: center;
		}
	}

	.gk-line {
		height: 20rpx;
		background: #f2f2f2;
	}

	// 新闻
	.news-list {
		.news-item {
			border-bottom: 1px solid #f2f2f2;
			padding: 20rpx 0;
			display: flex;
			align-items: stretch;

			img {
				width: 280rpx;
			}

			.news-content {
				padding-left: 20rpx;
				color: #999;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.news-title {
					color: #000000;
					font-size: 28rpx;
				}
			}
		}
	}
</style>